import React from "react";
import { Form, Input, Select, Button, DatePicker, Row, Col } from "antd";
export default function Index(props) {
  const { Item } = Form;
  const { Option } = Select;
  const { RangePicker } = DatePicker;
  const formLayout = props.formLayout;

  // 初始化表单
  function initFormItem() {
    const { formItemList } = props;
    const formList = [];
    if (!formItemList || formItemList.length === 0) return;
    // 循环处理传过来的数据
    formItemList.map((item) => {
      if (item.type === "Input") {
        formList.push(showInputElement(item));
      }
      if (item.type === "Select") {
        formList.push(showSelectElement(item));
      }
      if (item.type === "DatePicker") {
        formList.push(showDatePickerElement(item));
      }
      return null;
    });
    // 返回formList
    return formList;
  }
  // 展示input输入框
  function showInputElement(item) {
    return (
      <Col span={8}>
        <Item
          key={item.name}
          label={item.label || ""}
          name={item.name}
          rules={item.rule || []}
        >
          <Input placeholder={item.placeholder} />
        </Item>
      </Col>
    );
  }
  // 展示Select框
  function showSelectElement(item) {
    return (
      <Col span={8}>
        <Item
          key={item.name}
          label={item.label || []}
          name={item.name}
          rules={item.rule || []}
        >
          <Select placeholder={item.placeholder}>
            {item.options &&
              item.options.map((cItem) => {
                return (
                  <Option key={cItem.id} value={cItem.value}>
                    {cItem.country}
                  </Option>
                );
              })}
          </Select>
        </Item>
      </Col>
    );
  }

  // 展示DatePicker框
  function showDatePickerElement(item) {
    return (
      <Col span={8}>
        <Item
          key={item.name}
          label={item.label || []}
          name={item.name}
          rules={item.rule || []}
        >
          <RangePicker format="YYYY-MM-DD" />
        </Item>
      </Col>
    );
  }

  return (
    <Form {...formLayout} onFinish={props.onFinish} layout="vertical">
      <Row>{initFormItem()}</Row>
      <Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          登录
        </Button>
      </Item>
    </Form>
  );
}
